<template>
  <div class="zhuti">
    <div class="box">
      <div class="left">
        <p @click="xiaoShou(0)" :class="{ activ: num1 == 0 }">
          销售中 <span>{{a}}</span>
        </p>
        <p @click="xiaoShou(1)" :class="{ activ: num1 == 1 }">
          已下架 <span>{{b}}</span>
        </p>
        <p @click="xiaoShou(2)" :class="{ activ: num1 == 2 }">
          全部 <span>{{c}}</span>
        </p>
      </div>
      <div class="boxInput"></div>
      <div class="rig">
        <div>商品名称：</div>
        <div>
          <el-input v-model="input" placeholder="请输入商品名称" />
        </div>
        <el-button class="sou" :loading="ahh" @click="chaXun">搜索</el-button>
      </div>
    </div>
    <div class="buttom">
      <div class="header">
        <div class="left" @click="openn">
          删除<span v-show="num !== 0">x{{ num }} </span>
        </div>
        <div class="rig" @click="xinZengg">
          <div>
            <el-icon class="tubiao"><CirclePlusFilled /></el-icon>
          </div>
          <span>新增</span>
        </div>
      </div>
      <div class="Tab">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="55vh"
          @selection-change="selevChang"
          :header-cell-style="{ background: '#f5f5f5' }"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="info"
            label="用户"
            min-width="120"
            class="TableC"
          />
          <el-table-column prop="type" label="排序" min-width="120" />
          <el-table-column prop="info" label="商品" min-width="120" />
          <el-table-column prop="price" label="价格" min-width="300" />
          <el-table-column prop="info" label="评价图片" min-width="120" />
          <el-table-column prop="info" label="状态" min-width="120" />
          <el-table-column prop="createTime" label="评价时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scopee">
              <div class="bbox">
                <el-tooltip content="上架" placement="top">
                  <div
                    class="reply"
                    @click="putShelves(scopee)"
                    v-show="scopee.row.state == 1"
                  >
                    <el-icon><Upload /></el-icon>
                  </div>
                </el-tooltip>
                <el-tooltip content="下架" placement="top">
                  <div
                    class="reply"
                    @click="lowerShelf(scopee)"
                    v-show="scopee.row.state == 0"
                  >
                    <el-icon><Download /></el-icon>
                  </div>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <div class="reply" @click="afterSales(scopee)">
                    <el-icon><EditPen /></el-icon>
                  </div>
                </el-tooltip>

                <el-tooltip content="删除" placement="top">
                  <div class="reply" @click="huifu(scopee)">
                    <el-icon><Delete /></el-icon>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <chouti :title="title1" ref="yongHu" size="40%">
    <div class="xiugai">
      <div>商 &nbsp;&nbsp;&nbsp;品：</div>
      <div class="elinp">
        <el-input v-model="zhanghao" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai" v-show="xianshi">
      <div>排&nbsp;&nbsp;&nbsp; 序：</div>
      <div class="elinp">
        <el-input v-model="mima" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>价 &nbsp;&nbsp;&nbsp;格：</div>
      <div class="elinp">
        <el-input v-model="mingCheng" placeholder="请输入商品名称" />
      </div>
    </div>
    <div class="xiugai">
      <div>推广词 ：</div>
      <div class="elinp">
        <el-input v-model="phone" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>图片：</div>
      <div class="elinp">
        <phpone />
      </div>
    </div>
    <div class="wei">
      <el-button type="success" :plain="true" @click="open1(num2)"
        >确定<el-icon><Check /></el-icon
      ></el-button>
      <el-button type="danger" @click="quxiao"
        >取消<el-icon><CloseBold /></el-icon
      ></el-button>
    </div>
  </chouti>
</template>

<script setup>
import { dityList, dityeve, xuigai, shangchu } from "./api";
import { ref } from "vue";
import chouti from "../../components/chouti.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import phpone from "./phpone.vue";
import { useCookies } from "@vueuse/integrations/useCookies";
const cooks = useCookies();
// 查询
const input = ref("");
const ahh = ref(false);
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const yongHu = ref(null);
const status = ref(``);
const total = ref(0);
const loading = ref(false);
const id = ref(``);
//  全选删除数组
const arr = ref([]);
const zhanghao = ref(``);
// 商品价格
const mingCheng = ref(``);
// 排序
const mima = ref(1);
// 推广词
const phone = ref(``);
let title1 = ref(``);
let num = ref(0);
let num1 = ref(0);
let num2 = ref();
let a = ref(0)
let b = ref(0)
let c = ref(0)
const xianshi = ref(true);
const tableData = ref([]);
abc()
function abc(){
  dityList(0).then((res) => {
    a.value=res.data.data.total
  });
  dityList(1).then((res) => {
    b.value=res.data.data.total
  });
  dityList().then((res) => {
    c.value=res.data.data.total
  });
}
// 接口列表
function diyLista() {
  // console.log(num1.value,`---------`);
  dityList(num1.value).then((res) => {
    total.value = res.data.data.total;
    tableData.value = res.data.data.items;
  });
}
function chaXun() {
  dityList(num1.value, input.value).then((res) => {
    ahh.value = true;
    tableData.value = res.data.data.items;
    ahh.value = false;
  });
}
console.log();
// 上架
function putShelves(row) {
  ElMessageBox.confirm("请确定是否上架？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "上架成功",
      });
      xuigai(row.row.id, row.row.info, `0`).then(() => {
        diyLista();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消上架",
      });
    });
}
// 下架
function lowerShelf(row) {
  ElMessageBox.confirm("请确定是否下架？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "下架成功",
      });
      xuigai(row.row.id, row.row.info, 1).then(() => {
        diyLista();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消上架",
      });
    });
}
// 跳转
function xiaoShou(p) {
  loading.value = true;
  num1.value = p;
  currentPage4.value = 1;
  pageSize4.value = 10;
  cooks.set("num2", num1.value);
  dityList(num1.value).then((res) => {
    loading.value = false;
    tableData.value = res.data.data.items;
    total.value = res.data.data.total;
  });
}

// 多选删除弹出框
const openn = () => {
  if (num.value == 0) {
    ElMessage({
      type: "info",
      message: "请勾选需要删除的数据",
    });
  } else {
    ElMessageBox.confirm("请确定是否删除？", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        loading.value = true;

        arr.value.forEach((item, index) => {
          shangchu(item.id).then((res) => {});
          diyLista();
          loading.value = false;
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消删除",
        });
      });
  }
};
//   多选框
function selevChang(row) {
  arr.value = row;

  num.value = row.length;
}
let numHand = ref(1);
let numSize = ref(10);

function handleSizeChange(p) {
  numSize.value = p;
  loading.value = true;
  dityList(num1.value, "", numHand.value, p).then((res) => {
    console.log(res.data.data.items);
    tableData.value = res.data.data.items;
    loading.value = false;
  });
  // console.log(`显示几行`,p);
}
// 页面改变
function handleCurrentChange(p) {
  numHand.value = p;
  loading.value = true;
  dityList(num1.value, "", p, numSize.value).then((res) => {
    console.log(res.data.data.items);
    tableData.value = res.data.data.items;
    loading.value = false;
  });
  // console.log(`页数改变`, p);
}

//   删除
function huifu(row) {
  ElMessageBox.confirm("请确定是否删除？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      loading.value = true;
      shangchu(row.row.id).then((res) => {
        loading.value = false;
        diyLista();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
}
// 修改
function afterSales(row) {
  num2.value = 2;
  title1.value = `修改`;
  yongHu.value.open();
  id.value = row.row.id;
  status.value = row.row.state;
  console.log(row.row.state);
}
// 新增
function xinZengg() {
  num2.value = 1;
  title1.value = `新增`;
  yongHu.value.open();
}
// 确定
function open1(p) {
  console.log(!mingCheng.value && !zhanghao.value);
  if (!mingCheng.value || !zhanghao.value) {
    ElMessage({
      message: "提交失败",
      type: "error",
    });
  } else {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
    if (p == 1) {
      console.log(111);
      loading.value = true;
      dityeve(zhanghao.value, mingCheng.value)
        .then(() => {
          diyLista();
          loading.value = false;
        })
        .catch((eer) => {
          console.log(eer);
        });
    } else if (p == 2) {
      console.log(22);
      loading.value = true;
      xuigai(id.value, zhanghao.value, status.value).then(() => {
        loading.value = false;
        diyLista();
      });
    }
    yongHu.value.close();
  }
}
// 取消
function quxiao() {
  yongHu.value.close();
}

const initTabList = () => {
  const tabs = cooks.get("num2");
  // console.log(tabs);
  if (tabs) {
    num1.value = tabs;
  }
};
initTabList();
// 在此调用接口函数避免存储数据没得调用
diyLista();
</script>

<style scoped>
.zhuti {
  background-color: #f5f5f5;
}
.box {
  display: flex;
  justify-content: space-between;
}
.box > .left {
  margin-top: 10px;
  width: 50%;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  /* border-bottom: 1px solid black; */
  background-color: white;
  border-radius: 10px;
}
.box > .rig {
  padding: 0px 20px;
  margin-top: 15px;
  line-height: 40px;
  height: 40px;
  display: flex;
  background-color: white;
  border-radius: 10px;
}
.sou {
  margin-top: 7px;
  width: 70px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  background-color: #ff6a6c;
  text-align: center;
  border-radius: 5px;
  margin-left: 10px;
  color: white;
}
.left > p > span {
  background-color: #ff6a6c;
  border-radius: 100px;
  padding: 2px 5px;
  font-size: 10px;
}
.buttom {
  color: white;
  margin-top: 30px;
  background-color: white;
  border-radius: 10px;
}
.header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header > div {
  padding: 5px 0px;

  width: 80px;
  text-align: center;
  border-radius: 5px;
}
.header > .left {
  background-color: #7e6aff;
}
.header > .rig {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #ffa66a;
}
.header > .rig > div {
  font-size: 20px;
  margin-right: 3px;
}
.bbox {
  display: flex;
  padding: 30px 0;
}
.reply {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  margin-left: 5px;
  border: 1px #a9acb1 solid;
}
.reply:hover {
  background-color: #ff6a6c;
  color: white;
}
.paging {
  position: fixed;
  bottom: 20px;
}
.xiugai {
  display: flex;
  margin-bottom: 20px;
}
.elinp {
  width: 80%;
}
.wei {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 10px;
}
.activ {
  font-size: 26px;
  font-weight: 900;
}
</style>
